import React, { Component } from 'react'
import { Form, Input, Button, Upload, message } from 'antd';
//import MyUpload from "../../components/MyUpload/index"
import { LoadingOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import '../AvailableForm/index.css'
import axios from "axios"
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}

function beforeVideoUpload(file) {
    const isJpgOrPng = file.type === 'video/mp4';
    if (!isJpgOrPng) {
        message.error('You can only upload MP4 file!');
    }
    const isLt100M = file.size / 1024 / 1024 < 100;
    if (!isLt100M) {
        message.error('Image must smaller than 100MB!');
    }
    return isJpgOrPng && isLt100M;
}


export default class AvailableForm extends Component {

    state = {
        loading: false,
        id: 99999999999
    };

    onFinish = (values) => {
        fetch('http://60.205.246.238:3001/house/saveData', {
            method: 'post',
            headers: {
                "Content-type": "application/json"
            },
            body: JSON.stringify(values)
        }).then((response) => {
            return response.json()
        }).then((id) => {
            alert("提交成功，您可以继续提交这份项目的图片")
            console.log(id)//提交数据后拿到的id
            this.setState({ id })
        }).catch(function (error) {
            console.log(error)
        })
    };

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    loading: false,
                }),
            );
        }
    };

    ImgUpload = (files) => {
        const formData = new FormData()
        formData.append("id", this.state.id)
        formData.append("img", files.file)
        axios({
            method: 'post',
            url: 'http://60.205.246.238:3001/house/saveImages',
            headers: {
                "Content-type": "application/json"
            },
            data: formData
        }).then((response) => {
            return response
        }).then((data) => {
            console.log(data)
        }).catch(function (error) {
            console.log(error)
        })
    }
    VideoUpload = (files) => {
        const formData = new FormData()
        formData.append("id", this.state.id)
        formData.append("video", files.file)
        console.log(files.file);
        axios({
            method: 'post',
            url: 'http://60.205.246.238:3001/video/saveVideo',
            headers: {
                "Content-type": "application/json"
            },
            data: formData
        }).then((response) => {
            return response
        }).then((data) => {
            console.log(data)
        }).catch(function (error) {
            console.log(error)
        })
    }

    render() {
        const { loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );

        return (
            <div id='con'>
                <div style={{ marginTop: 40 }} className='formleft'>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 8,
                        }}
                        // defaultValues={{
                        //     remember: true,
                        // }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="房屋拥有者"
                            name="owner"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your owner!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="产权"
                            name="property"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your property!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="标题"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your title!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="拟流转价格"
                            name="price"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your price!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="流转时间"
                            name="transTime"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your transTime!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="联系人"
                            name="linkMan"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your linkMan!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="联系电话"
                            name="tel"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your tel!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="房屋所在村"
                            name="village"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your village!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="房屋详细地址"
                            name="address"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your address!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>


                        <Form.Item
                            label="产权证号"
                            name="deedNumber"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your deedNumber!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="建成年份"
                            name="buildYear"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your buildYear!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="占地面积"
                            name="coverArea"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your coverArea!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="建筑面积"
                            name="buildArea"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your buildArea!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="建筑结构"
                            name="buildStruct"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your buildStruct!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="房屋层数"
                            name="layNum"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your layNum!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="配套"
                            name="support"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your support!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form >
                </div >
                <div className='formright'>
                    <div style={{ height: 40 }}></div>
                    <Upload
                        customRequest={this.ImgUpload}
                        maxCount='1'
                        name=""
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/house/upload"
                        beforeUpload={beforeUpload}
                        onChange={this.handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>


                    <Upload
                        customRequest={this.VideoUpload}
                        maxCount='1'
                        showUploadList={false}
                        beforeUpload={beforeVideoUpload}
                    >
                        <Button icon={<UploadOutlined />}>上传视频</Button>
                    </Upload>
                </div>

            </div>

        )
    }
}
